<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>报废单</title>
    <!--引入 element-ui 的样式，-->
    <link rel="stylesheet" href="/assets/css/elementui.css">
    <link rel="stylesheet" href="/assets/libs/layui/css/layui.css"/>
    <link rel="stylesheet" href="/assets/module/admin.css?v=317"/>
    <link rel="stylesheet" href="css/apply.css">
    <style>
        .el-row .el-form-item {
            margin-bottom: 0px;
            text-align: center;
            border-right: 1px solid black;
        }

        .el-row {
            border: 1px solid black;
            margin-bottom: -1px !important;
        }

        .el-input {
            width: auto;
        }
    </style>
</head>
<body>
<!-- 正文开始 -->
<div id="app">
    <div id="fm">
        <el-form label-positon="left">
            <div>
                <div>
                    <h2 align=" center" id="title">固定资产报废审批单</h2>
                    <p>申请日期： <span id="crtDate"></span></p>
                </div>
            </div>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="申请人">
                        <el-input v-model="form.userName" readonly></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="部门">
                        <el-input v-model="form.department" readonly></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="4">
                    <el-form-item label="资产编号"></el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label="名称"></el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label="资产类别"></el-form-item>
                </el-col>
                <el-col :span="3">
                    <el-form-item label="开始使用时间"></el-form-item>
                </el-col>
                <el-col :span="3">
                    <el-form-item label="原币原值"></el-form-item>
                </el-col>
                <el-col :span="3">
                    <el-form-item label="已提折旧"></el-form-item>
                </el-col>
                <el-col :span="3">
                    <el-form-item label="净值"></el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="4">
                    <el-form-item>
                        <el-input v-model="form.num"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item>
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item>
                        <el-input v-model="form.type"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="3">
                    <el-form-item>
                        <el-input v-model="form.firstUseTime"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="3">
                    <el-form-item>
                        <el-input v-model="form.oriMoney"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="3">
                    <el-form-item>
                        <el-input v-model="form.discountMoney"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="3">
                    <el-form-item>
                        <el-input v-model="form.money"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    报废原因
                </el-col>
                <el-col :span="24">
                    <el-form-item>
                        <el-input v-model="form.reason" type="textarea" autosize :readonly="instanceId!=''"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <div style="display: flex;justify-content: center">
                <el-button v-if="!instanceId" size="mini" type="primary" style="text-align: center" @click="submitForm">
                    提交
                </el-button>
            </div>
        </el-form>
        <el-table
                v-if="instanceId"
                :data="tableData"
                border
                style="margin-top: 1em;">
            <el-table-column
                    prop="stepId"
                    label="审批顺序"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="orgname"
                    label="组织"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="nickName"
                    label="姓名"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="状态"
                    width="80">
                <template slot-scope="scope">
                    <span>{{handleStatus(scope.row)}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="action"
                    label="操作"
                    width="200">
                <template slot-scope="scope">
                    <el-button v-if="(getUserId()==scope.row.person)&&(scope.row.status==2)&&(scope.row.makeFlag!=2)"
                               type="primary" size="mini"
                               @click="handleAction(scope.row)">审核
                    </el-button>
                    <el-button
                            v-else-if="(getUserId()==scope.row.person)&&(scope.row.status==2)&&(scope.row.makeFlag==2)"
                            type="primary" size="mini"
                            @click="handleAction(scope.row)">执行
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column
                    prop="updateTime"
                    label="审批时间"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="comment"
                    label="备注"
                    width="200">
            </el-table-column>
        </el-table>
    </div>
</div>
<script type="text/javascript" src="/assets/libs/layui/layui.js"></script>
<script type="text/javascript" src="/assets/js/common.js?v=317"></script>
<script type="text/javascript" src="/assets/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="/assets/js/js.cookie.min.js"></script>
<script type="text/javascript" src="/assets/js/sqjx.js"></script>
<script src="/assets/js/vue.min.js"></script>
<script src="/assets/js/elementui.js"></script>
<script type="text/javascript" src="js/design2.js"></script>
<script type="text/javascript" src="js/multiSelect.js"></script>
<script>

    function submitForm(param) {
        createFlow2Approve(param);
    }

    let that;
    new Vue({
        el: '#app',
        data: function () {
            return {
                templateId: '1561605812968951809',
                content:'apply/scrap',
                instanceId: '',
                checkedCount: 0,
                tableData: [],
                form: {
                    userName:'',
                    department:'',
                    num: '',
                    name: '',
                    type: '',
                    firstUseTime: '',
                    oriMoney: '',
                    discountMoney: '',
                    money: '',
                },
                computerList: [],
                computerInfo: {},
                flowNodes: []
            }
        },
        mounted: function () {
            that = this;
            that.getFlowApproveUserList();
            window.doSubmitForm = this.submitForm
            var instanceId = getUrlParam();
            this.instanceId = instanceId;
            if (instanceId) {
                //审批进入
                that.tableData = getProcessData(instanceId);
                // //查询流程详情
                $.post('/office/flowStepInstance/queryDetail', {id: instanceId}, function (res) {
                    if (res.code == 200) {
                        that.form = res.obj;
                        $("#crtDate").text(formatDate(new Date(res.obj.crtDate)));
                    }
                });
            } else {
                //新建流程
                drawAdd();
                var html = ' <button onclick="addExecute()">添加执行人</button>';
                $(html).appendTo("#designButtonList");
                var today = formatDate(new Date())
                $("#crtDate").text(today);
                this.form.userName = getUserName()
                this.form.department = getOrgName();
            }

        },
        methods: {
            getUserId() {
                return getUserId();
            },
            handleAction(row) {
                openApprove(row.templateId, row.person, row.makeFlag)
            },
            handleChange(row) {
                that.computerInfo = that.computerList.find(x => x.编号 == row);
                that.form.onUseName = that.computerInfo.责任人
            },
            handleStatus(row) {
                return getStatus(row);
            },
            getFlowApproveUserList() {
                $.get('/office/user/getUserMainOrg', {account: getAccount()}, function (res) {
                    var orgId = res.obj.orgId;
                    var param1 = {templateId: that.templateId, dynamicOrgId: orgId};
                    $.get('/office/flowWorkTemplate/getFlowApproveUserList', param1, function (res) {
                        let a = res.obj.map(item => {
                            return {orgId: item}
                        })
                        that.flowNodes=a;
                        drawFlowStep(a);
                    })
                })

            },
            submitForm() {
                debugger
                var flag = true;
                Object.keys(this.form).forEach(item => {
                    var value = this.form[item];
                    if (!value) {
                        flag = false
                    }
                });
                if (!flag) {
                    showAlert("请补全表单详情后提交");
                    return false;
                }
                that.$confirm('确认提交?').then(res => {
                    var params = {};
                    params.userId = localStorage.getItem("userId");
                    params.userName = getUserName();
                    params.department = getOrgName();
                    params.title = $("#title").text();
                    params.reason = that.form.reason
                    params.content = that.content;
                    params.templateId = that.templateId
                    params.businessStr = JSON.stringify(that.form);
                    params.approveNodes = JSON.stringify(that.flowNodes)
                    submitForm(params);
                })
            },
        },

    })
</script>
</body>
</html>
